<template>
    <div class="selectAddress">
        <el-cascader
            v-model="valueData"
            ref="elCascaders"
            class="elCascader elCascaderWidth"
            :options="areaData"
            :props="property"
            :placeholder="placeholder"
            :disabled="disabled"
            :clearable="clearable"
            :separator="separator"
            :checkStrictly="checkStrictly"
            :multiple="multiple"
            @change="handleChange"
        />
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
import { areaData } from "@/utils/areaData";
import { ElTree } from "element-plus";
interface Props {
    value?: string; // 默认值
    placeholder?: string; // 输入框占位文本
    disabled?: boolean; // 是否禁用
    clearable?: boolean; // 是否支持清空选项
    separator?: string; // 选项分隔符
    checkStrictly?: boolean; // 是否可以选任意一项
    multiple?: boolean; // 是否多选
    level?: number; // 联动级别
    getAreaData?: Function; // 数据返回
}
const props = withDefaults(defineProps<Props>(), {
    value: "",
    placeholder: "请选择地址",
    disabled: false,
    clearable: false,
    separator: "/",
    checkStrictly: false,
    multiple: false,
    level: 4,
    getAreaData: () => {
        return {
            key: [],
            value: [],
            keyText: "",
            valueText: "",
        };
    },
});
interface property {
    checkStrictly?: boolean;
    multiple?: boolean;
    value?: string;
    label?: string;
    expandTrigger?: any;
}
let valueData: any = ref([]);
setTimeout(() => {
    if (props.value) {
        valueData.value = props.value.split(",");
    }
    // console.log(valueData.value);
}, 300);
let property: property = {
    checkStrictly: props.checkStrictly,
    multiple: props.multiple,
    value: "key",
    label: "value",
    expandTrigger: "hover" as const,
};
const elCascaders: any = ref<InstanceType<typeof ElTree>>();

const handleChange = (value: []) => {
    const node: any = elCascaders.value?.getCheckedNodes()[0];
    let data = {
        key: node.pathValues || [],
        value: node.pathLabels || [],
        keyText: node.pathValues.join() || "",
        valueText: node.text || "",
    };
    props.getAreaData(data);
    elCascaders.value?.togglePopperVisible();
};
</script>
<style>
.selectAddress .elCascader.elCascaderWidth {
    width: 100%;
}
</style>
